<!DOCTYPE html>
<html>
<head>
	<title>实时轨迹跟踪 - 雁农冷链平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<!-- 高德地图 -->
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=18650c5819bbc65ca105226be4b75acd&plugin=AMap.Driving"></script>
	<style>
		.tracking-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.search-section {
			margin-bottom: 25px;
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.tracking-result {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			overflow: hidden;
		}
		.order-info {
			padding: 25px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
		}
		.map-container {
			height: 400px;
			margin: 20px;
			border-radius: 8px;
			border: 1px solid #e4e7ed;
			overflow: hidden;
		}
		#amap-container {
			width: 100%;
			height: 100%;
		}
		.tracking-timeline {
			padding: 25px;
			position: relative;
		}
		.timeline-item {
			position: relative;
			padding-left: 40px;
			margin-bottom: 25px;
		}
		.timeline-item::before {
			content: '';
			position: absolute;
			left: 15px;
			top: 0;
			bottom: -25px;
			width: 2px;
			background: #e4e7ed;
		}
		.timeline-item:last-child::before {
			display: none;
		}
		.timeline-dot {
			position: absolute;
			left: 8px;
			top: 8px;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: #409EFF;
			border: 3px solid #fff;
			box-shadow: 0 0 0 2px #409EFF;
		}
		.timeline-dot.current {
			background: #67C23A;
			box-shadow: 0 0 0 2px #67C23A;
			animation: pulse 2s infinite;
		}
		.timeline-dot.completed {
			background: #909399;
			box-shadow: 0 0 0 2px #909399;
		}
		@keyframes pulse {
			0% { transform: scale(1); }
			50% { transform: scale(1.2); }
			100% { transform: scale(1); }
		}
		.timeline-content {
			padding: 15px 20px;
			background: #f8f9fa;
			border-radius: 8px;
			border-left: 4px solid #409EFF;
		}
		.timeline-content.current {
			border-left-color: #67C23A;
			background: #f0f9ff;
		}
		.timeline-content.completed {
			border-left-color: #909399;
		}
		.timeline-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
		.timeline-title {
			font-weight: bold;
			color: #333;
			font-size: 16px;
		}
		.timeline-time {
			color: #909399;
			font-size: 14px;
		}
		.timeline-desc {
			color: #666;
			line-height: 1.6;
			margin-bottom: 10px;
		}
		.timeline-details {
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			margin-top: 10px;
		}
		.detail-item {
			display: flex;
			align-items: center;
			font-size: 14px;
		}
		.detail-label {
			color: #909399;
			margin-right: 5px;
		}
		.detail-value {
			color: #333;
			font-weight: 500;
		}
		.status-badge {
			padding: 4px 12px;
			border-radius: 12px;
			font-size: 12px;
			font-weight: bold;
		}
		.status-shipping {
			background: #e1f3d8;
			color: #67c23a;
		}
		.status-transit {
			background: #fdf6ec;
			color: #e6a23c;
		}
		.status-delivered {
			background: #f0f9ff;
			color: #409eff;
		}
		.refresh-btn {
			position: fixed;
			bottom: 30px;
			right: 30px;
			z-index: 1000;
		}
	</style>
</head>
<body>
	<div id="app" class="vue-admin-beautiful-wrapper">
		<div class="tracking-container">
			<!-- 搜索区域 -->
			<div class="search-section">
				<h2 style="margin-bottom: 20px; color: #333;">🚚 实时轨迹跟踪</h2>
				<el-form :inline="true" :model="searchForm">
					<el-form-item label="订单号">
						<el-input v-model="searchForm.orderNo" placeholder="请输入订单号" style="width: 250px;">
							<template slot="prepend">📋</template>
						</el-input>
					</el-form-item>
					<el-form-item label="运单号">
						<el-input v-model="searchForm.waybillNo" placeholder="请输入运单号" style="width: 250px;">
							<template slot="prepend">🚛</template>
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchTracking" :loading="loading">查询轨迹</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- 跟踪结果 -->
			<div class="tracking-result" v-if="trackingData">
				<!-- 订单基本信息 -->
				<div class="order-info">
					<el-row :gutter="20">
						<el-col :span="6">
							<h3 style="margin: 0 0 15px 0;">📦 {{ trackingData.productName }}</h3>
							<p><strong>订单号：</strong>{{ trackingData.orderNo }}</p>
							<p><strong>运单号：</strong>{{ trackingData.waybillNo }}</p>
						</el-col>
						<el-col :span="6">
							<p><strong>发货地：</strong>{{ trackingData.origin }}</p>
							<p><strong>目的地：</strong>{{ trackingData.destination }}</p>
							<p><strong>预计送达：</strong>{{ trackingData.estimatedDelivery }}</p>
						</el-col>
						<el-col :span="6">
							<p><strong>承运商：</strong>{{ trackingData.carrier }}</p>
							<p><strong>司机：</strong>{{ trackingData.driver }}</p>
							<p><strong>联系电话：</strong>{{ trackingData.driverPhone }}</p>
						</el-col>
						<el-col :span="6">
							<p><strong>当前状态：</strong>
								<span :class="'status-badge status-' + trackingData.status">{{ trackingData.statusText }}</span>
							</p>
							<p><strong>当前温度：</strong>{{ trackingData.currentTemp }}℃</p>
							<p><strong>最后更新：</strong>{{ trackingData.lastUpdate }}</p>
						</el-col>
					</el-row>
				</div>

				<!-- 地图显示区域 -->
				<div class="map-container">
					<div id="amap-container"></div>
				</div>

				<!-- 物流轨迹时间线 -->
				<div class="tracking-timeline">
					<h3 style="margin-bottom: 25px; color: #333;">🛤️ 物流轨迹</h3>
					<div class="timeline-item" v-for="(item, index) in trackingData.timeline" :key="index">
						<div :class="['timeline-dot', item.status]"></div>
						<div :class="['timeline-content', item.status]">
							<div class="timeline-header">
								<div class="timeline-title">{{ item.title }}</div>
								<div class="timeline-time">{{ item.time }}</div>
							</div>
							<div class="timeline-desc">{{ item.description }}</div>
							<div class="timeline-details">
								<div class="detail-item" v-if="item.location">
									<span class="detail-label">📍 位置：</span>
									<span class="detail-value">{{ item.location }}</span>
								</div>
								<div class="detail-item" v-if="item.temperature">
									<span class="detail-label">🌡️ 温度：</span>
									<span class="detail-value">{{ item.temperature }}℃</span>
								</div>
								<div class="detail-item" v-if="item.operator">
									<span class="detail-label">👤 操作员：</span>
									<span class="detail-value">{{ item.operator }}</span>
								</div>
								<div class="detail-item" v-if="item.vehicle">
									<span class="detail-label">🚛 车辆：</span>
									<span class="detail-value">{{ item.vehicle }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 无结果提示 -->
			<div class="tracking-result" v-else-if="searched">
				<el-empty description="未找到相关物流信息"></el-empty>
			</div>
		</div>

		<!-- 刷新按钮 -->
		<el-button class="refresh-btn" type="primary" circle @click="refreshTracking" v-if="trackingData">
			<i class="el-icon-refresh"></i>
		</el-button>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				searchForm: {
					orderNo: '',
					waybillNo: ''
				},
				trackingData: null,
				searched: false,
				loading: false,
				map: null,
				driving: null,
				currentMarker: null
			},
			methods: {
				searchTracking() {
					if (!this.searchForm.orderNo && !this.searchForm.waybillNo) {
						this.$message.warning('请输入订单号或运单号');
						return;
					}
					
					this.loading = true;
					this.searched = true;
					
					// 模拟查询数据
					setTimeout(() => {
						this.trackingData = {
							productName: '衡阳湘莲 500g',
							orderNo: this.searchForm.orderNo || 'HY202401190001',
							waybillNo: this.searchForm.waybillNo || 'HYWB202401190001',
							origin: '衡阳市蒸湘区',
							destination: '长沙市芙蓉区',
							estimatedDelivery: '2024-01-20 18:00',
							carrier: '衡阳雁农冷链物流',
							driver: '张师傅',
							driverPhone: '138****8888',
							status: 'transit',
							statusText: '运输中',
							currentTemp: '4.2',
							lastUpdate: '2024-01-19 15:30:00',
							currentLocation: '湘赣高速湘潭服务区',
							timeline: [
								{
									status: 'completed',
									title: '订单确认',
									time: '2024-01-19 09:00:00',
									description: '订单已确认，开始准备发货',
									location: '衡阳市蒸湘区配送中心',
									operator: '系统自动'
								},
								{
									status: 'completed',
									title: '商品出库',
									time: '2024-01-19 10:30:00',
									description: '衡阳湘莲已从仓库出库，准备装车',
									location: '衡阳市蒸湘区仓储中心',
									temperature: '3.8',
									operator: '王仓管员'
								},
								{
									status: 'completed',
									title: '装车发货',
									time: '2024-01-19 11:15:00',
									description: '衡阳湘莲已装车完成，车辆开始发货',
									location: '衡阳市蒸湘区物流园',
									temperature: '4.0',
									operator: '张师傅',
									vehicle: '湘D·A8888（冷藏车）'
								},
								{
									status: 'current',
									title: '运输途中',
									time: '2024-01-19 15:30:00',
									description: '车辆正在运输途中，湘莲保存温度正常',
									location: '湘赣高速湘潭服务区',
									temperature: '4.2',
									operator: '张师傅',
									vehicle: '湘D·A8888（冷藏车）'
								},
								{
									status: '',
									title: '到达配送站',
									time: '预计 2024-01-20 08:00:00',
									description: '预计到达长沙配送站',
									location: '长沙市芙蓉区配送站'
								},
								{
									status: '',
									title: '派送中',
									time: '预计 2024-01-20 14:00:00',
									description: '开始最后一公里配送',
									location: '长沙市芙蓉区'
								},
								{
									status: '',
									title: '签收完成',
									time: '预计 2024-01-20 18:00:00',
									description: '客户签收，订单完成',
									location: '长沙市芙蓉区某某小区'
								}
							]
						};
						
						this.loading = false;
						this.$message.success('轨迹查询成功');
						
						// 初始化地图
						this.$nextTick(() => {
							this.initMap();
						});
					}, 1500);
				},
				resetForm() {
					this.searchForm = {
						orderNo: '',
						waybillNo: ''
					};
					this.trackingData = null;
					this.searched = false;
				},
				refreshTracking() {
					this.$message.info('正在刷新轨迹信息...');
					// 这里可以重新调用查询接口
					setTimeout(() => {
						this.trackingData.lastUpdate = new Date().toLocaleString();
						// 更新地图上的当前位置
						if (this.map && this.currentMarker) {
							// 模拟位置更新
							const newPosition = [113.115556, 27.615556]; // 湘潭服务区坐标
							this.currentMarker.setPosition(newPosition);
							this.map.setCenter(newPosition);
						}
						this.$message.success('轨迹信息已更新');
					}, 1000);
				},
				initMap() {
					// 初始化地图
					this.map = new AMap.Map('amap-container', {
						zoom: 8,
						center: [112.607693, 26.900358], // 衡阳坐标
						mapStyle: 'amap://styles/whitesmoke'
					});
					
					// 添加地图控件
					this.map.addControl(new AMap.Scale());
					this.map.addControl(new AMap.ToolBar());
					
					// 创建路线规划实例
					this.driving = new AMap.Driving({
						map: this.map,
						panel: null
					});
					
					// 设置起点和终点
					const startPoint = [112.607693, 26.900358]; // 衡阳蒸湘区坐标
					const endPoint = [113.017333, 28.198198]; // 长沙芙蓉区坐标
					const currentPoint = [113.115556, 27.615556]; // 湘潭服务区坐标（当前位置）
					
					// 添加起点标记
					const startMarker = new AMap.Marker({
						position: startPoint,
						title: '发货地：衡阳市蒸湘区',
						icon: new AMap.Icon({
							size: new AMap.Size(32, 32),
							image: 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#67C23A"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>')
						})
					});
					
					// 添加终点标记
					const endMarker = new AMap.Marker({
						position: endPoint,
						title: '目的地：长沙市芙蓉区',
						icon: new AMap.Icon({
							size: new AMap.Size(32, 32),
							image: 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#F56C6C"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>')
						})
					});
					
					// 添加当前位置标记（动态）
					this.currentMarker = new AMap.Marker({
						position: currentPoint,
						title: '当前位置：湘赣高速湘潭服务区',
						icon: new AMap.Icon({
							size: new AMap.Size(40, 40),
							image: 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#409EFF"><circle cx="12" cy="12" r="8" fill="#409EFF" opacity="0.3"/><circle cx="12" cy="12" r="4" fill="#409EFF"/></svg>')
						}),
						animation: 'AMAP_ANIMATION_BOUNCE'
					});
					
					// 规划路线
					this.driving.search(startPoint, endPoint, (status, result) => {
						if (status === 'complete') {
							// 路线规划成功
							console.log('路线规划成功');
						}
					});
					
					// 设置地图视野以包含所有标记点
					this.map.setFitView([startMarker, endMarker, this.currentMarker]);
				}
			}
		});
	</script>
</body>
</html>